<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tween demo</title>
	<script>
		var Tween = {
		  Bounce: {
		        easeIn: function(t,b,c,d){
		            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
		        },
		        easeOut: function(t,b,c,d){
		            if ((t/=d) < (1/2.75)) {
		                return c*(7.5625*t*t) + b;
		            } else if (t < (2/2.75)) {
		                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		            } else if (t < (2.5/2.75)) {
		                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		            } else {
		                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		            }
		        },
		        easeInOut: function(t,b,c,d){
		            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
		            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
		        }
		    }

		 }
		 var b=-300,c=600,d=300,t=0;
		function run(){
			  var div = document.getElementById("div1");
			  div.style.left =  Math.ceil(Tween.Bounce.easeInOut(t,b,c,d))+"px";
			  if(t<d){
			   t+=3;
			   setTimeout(run,10);
			 
			  }
		}
	</script>
</head>
<body onload="run();">
	<div style="width:1000px; height:1000px; position:relative; overflow:hidden; background-color:#9966CC">
  <div id="div1" style="width:300px; height:200px; background-color:#0099FF; position:absolute; left:-300px; top:300px;">
  </div>
 </div>
</body>
</html>